<template>
	<view class="pages">
		<view class="logoImg">
			<image src="/static/images/logo.jpg" mode=""></image>
		</view>
		<view class="discounts">
			<view class="label" v-for="(item, index) in discounts" :key="index">满{{item.full}}赠{{item.give}}</view>
		</view>
		<form @submit="formSubmit">
			<input type="digit" :value="value" placeholder="请输入您要充值的金额" placeholder-style="color:#878787;text-align: center;" name="money" />
			
			<button form-type="submit">立即充值</button>
		</form>
	</view>
</template>

<script>
	import { HTTP } from '@/pages/http.js';
	let http = new HTTP();
	export default {
		data(){
			return {
				value: '',
				discounts: []
			}
		},
		onLoad() {
			this.topUpInfo();
		},
		methods:{
			//右上角分享功能
			onShareAppMessage: function (res) {
			  return {
			    title: 'unclearcare 球鞋洗护',
			    path: '/pages/index/index',
			    success: function (res) {
				  // 转发成功
			    },
			    fail: function (res) {
				  // 转发失败
			    }
			  }
			},
			topUpInfo(){
				http.request({
					method: 'GET',
					url: 'recharge/list',
					success:(res)=>{
						if(res.data.code == 200){
							this.discounts = res.data.data;
						}
					}
				})
			},
			formSubmit(e){
				http.request({
					method: 'POST',
					data: {
						price: e.detail.value.money
					},
					url: 'recharge',
					success:(res)=>{
						if(res.data.code == 200){
							uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: res.data.data.timeStamp+'',
							    nonceStr: res.data.data.nonceStr,
							    package: res.data.data.package,
							    signType: res.data.data.signType,
							    paySign: res.data.data.paySign,
							    success: (res)=>{
									this.value = '';
									uni.showToast({
										title:'支付成功!'
									});
									setTimeout(()=>{
										uni.switchTab({
											url: '/pages/me/index'
										})
									},2000)
							    },
							    fail: function (err) {
									uni.showToast({
										icon: 'none',
										title:'支付失败!'
									});
							    }
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pages{
		padding: 200upx 20upx 20upx 20upx;
		.logoImg{
			width: 150upx;
			height: 150upx;
			border-radius: 10upx;
			overflow: hidden;
			margin: 0 auto;
			margin-bottom: 20upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.discounts{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			.label{
				height: 35upx;
				line-height: 30upx;
				border: 1upx solid rgba(0,0,0,.7);
				font-size: 18upx;
				margin-left: 10upx;
				margin-bottom: 10upx;
				padding: 2upx 8upx;
			}
		}
		input{
			margin-top: 100upx;
			height: 80upx;
			line-height: 80upx;
			border: 1px solid #eee;
			text-align: center;
			font-size: 26upx;
		}
		button{
			height: 80upx;
			line-height: 80upx;
			background-color: #000;
			color: #fff;
			margin-top: 20upx;
			font-size: 30upx;
		}
	}
</style>
